<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        姓氏: <input type="text" v-model="surnames"><br>
        名字: <input type="text" v-model="theName"><br>
        全名:{{fullName}}<br>
        <button @click="update">设置fullName的名字'小瘪三'</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    count: 0,
                    surnames: '',
                    theName: '',
                }
            },
            computed: {
                fullName: {
                    //当计算属性被读取的时候，就会调用get方法，
                    // 如果计算属性只有get方法则可以直接简写为:fullName(){return XXX}`
                    get() {
                        return this.surnames + '-' + this.theName
                    },
                    //当计算属性被设置的时候，就会调用set方法，
                    // 并且set方法接收一个参数，这个参数就是被设置的值，
                    // 当计算属性被设置以后做什么事情，根据情况来写就行
                    set(value) {
                        [this.surnames, this.theName] = value.split(' ')
                    }
                },
              
            },
            methods: {
                    update() {
                        this.fullName = '小 瘪三'
                    },
                },
        })
    </script>
</body>

</html>